<template>
  <el-dialog
    title="处理申诉"
    :visible.sync="dialogVisible"
    width="50%">
    <el-form ref="form" :model="appealForm" label-width="120px">
      <el-form-item label="申诉原因说明">
        <span>{{ orderInfo.complaintContent }}</span>
      </el-form-item>
      <el-form-item label="操作类型">
        <el-radio v-model="appealForm.handleState" label="2">同意申诉</el-radio>
        <el-radio v-model="appealForm.handleState" label="3">拒绝申诉</el-radio>
      </el-form-item>
      <el-form-item v-if="appealForm.handleState == 2" label="部门失误类型" :rules="[{ required: true, message: '请选择投诉类型', trigger: 'change' }]" prop="responsibleDepartmentError">
        <DepartmentTypeCascader class="w-320" v-model="appealForm.responsibleDepartmentError"></DepartmentTypeCascader>
      </el-form-item>
      <el-form-item v-if="appealForm.handleState == 3" label="处理凭证" prop="channelKey">
        <XmUpload
          :file-list="fileList"
          :on-remove="handleImgRemove"
          :on-success="handleUploadSuccess"
          :before-upload="handleBeforeUpload"
        ></XmUpload>
      </el-form-item>
      <el-form-item label="处理结果" :rules="[{ required: true, message: '请输入处理结果', trigger: 'change' }]" prop="processingResults">
        <el-input
          class="w-320"
          type="textarea"
          placeholder="请输入内容"
          v-model.trim="appealForm.processingResults"
          maxlength="250"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button size="small" type="primary" @click="submit()">提 交</el-button>
      <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
      
    </span>
  </el-dialog>
</template>

<script>
import { updateComplaints } from '@/api/workorder'
export default {
  data() {
    return {
      dialogVisible: false,
      orderInfo: {},
      appealForm: {
        handleState: '2',   //单选项
        processingResults: '',   //输入框内容
        responsibleDepartmentError: [],
      },
      fileList: []
    };
  },
  methods: {
    show({data}) {
      this.orderInfo = data || {}
      this.dialogVisible = true
      this.clearForm()
      this.appealForm.responsibleDepartmentError = data.responsibleDepartmentError && data.responsibleDepartmentError.split(',')
    },
    clearForm() {
      this.appealForm = {
        handleState: '2',   //单选项
        processingResults: '',   //输入框内容
        responsibleDepartmentError: [],
      }
      this.fileList = []
    },
    handleUploadSuccess(response, file, fileList) {
      this.fileList = fileList
    },
    handleImgRemove(file, fileList) {
      this.fileList = fileList
    },
    handleBeforeUpload(file) {
      const sizeLimit = file.size / 1024 / 1024 < 20;
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("图片只能是 JPG 格式 与 png格式!");
        return false;
      }
      if (!sizeLimit) {
        this.$message.error("图片大小不能超过 20MB!");
        return false;
      }
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          updateComplaints(this.getParams()).then(res => {
            if(res.data.code == 200) {
              this.$message.success("处理成功");
              this.dialogVisible = false
              this.$emit('submit');
            } else {
              this.$message.error("处理失败，请重试：" + res.data.msg);
            }
          })
        }
      })
    },
    getParams() {
      const originExtJson = this.orderInfo.extJson ? JSON.parse(this.orderInfo.extJson) : {}
      originExtJson.handleImgs = this.fileList.map(item => item.response.data)
      return {
        id: this.orderInfo.id,
        handleState: this.appealForm.handleState,
        processingResults: this.appealForm.processingResults,
        responsibleDepartmentError: this.appealForm.handleState == 2 ? this.appealForm.responsibleDepartmentError && this.appealForm.responsibleDepartmentError.join(',') : undefined,
        extJson: this.appealForm.handleState == 3 ? JSON.stringify(originExtJson) : undefined,
      }
    }
  }
};
</script>
<style lang="scss" scoped>

</style>